<template>
  <div v-move :style="{
    top: '' + item.y + 'px',
      left: '' + item.x + 'px',
        backgroundColor: item.backgroundColor,
          width: item.width + 'px',
            height: item.height + 'px',
              lineHeight: item.height + 'px',
                border: item.border,
                  borderRadius: item.borderRadius,
                        }" class="node-item" :class="(currentActiveClassName, typeClassName)"
    @click.stop="nodeClick(item)" @mouseover.stop="nodeMouseover" @mousedown.stop="nodeMouseDown"
    @mouseleave.stop="nodeMouseout" @keyup.delete="nodeDelete(item)">
    <div class="icon" :style="{ background: `url(rule/${item.icon}) no-repeat` }"></div>
    <div class="title" :style="{ color: item.color }">
      {{ item.name }}
    </div>
    <template v-if="showPoint()">
      <div class="top node-point" @mousedown.stop="nodePointMousedown(item, 'top')"
        @mouseup.stop="nodePointMouseup(item, 'top')"></div>
      <div class="bottom node-point" @mousedown.stop="nodePointMousedown(item, 'bottom')"
        @mouseup.stop="nodePointMouseup(item, 'bottom')"></div>
      <div class="left node-point" @mousedown.stop="nodePointMousedown(item, 'left')"
        @mouseup.stop="nodePointMouseup(item, 'left')"></div>
      <div class="right node-point" @mousedown.stop="nodePointMousedown(item, 'right')"
        @mouseup.stop="nodePointMouseup(item, 'right')"></div>
    </template>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
export default {
  name: "FlowNode",
  props: {
    item: {
      type: Object,
      default: () => { },
    },
    currentNode: {
      type: Object,
      default: () => { },
    },
    isLine: {
      type: Boolean,
      default: false,
    }
  },
  directives: {
    move: {
      inserted(el, binding, vnode) {
        const self = vnode.context
        const odiv = el;
        odiv.onmousedown = (e) => {
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          document.onmousemove = (e1) => {
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;

            // el.style.left = left + 'px'
            // el.style.top = top + 'px'
            self.item.x = left;
            self.item.y = top;
            self.$emit('nodeMove', self.item)
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  computed: {
    currentActiveClassName() {
      if (this.currentNode.id == this.item.id) {
        return "active";
      } else {
        return "";
      }
    },
    activeClassName() {
      if (this.active) {
        return "active";
      } else {
        return "";
      }
    },
    typeClassName() {
      if (this.item.type === "start") {
        return "circular";
      } else if (this.item.type === "end") {
        return "circular";
      } else {
        return "rectangle";
      }
    },
  },
  mounted() {
    console.log('currentNode', this.currentNode);
  },
  data() {
    return {
      active: false,
      pointDown: false,
    };
  },
  methods: {
    showPoint() {
      if (this.currentNode.id == this.item.id || this.active) {
        return true
      }
    },
    nodeClick(element) {
      this.$emit("nodeClick", element);
    },
    nodeMouseover() {
      if (this.currentNode.id != this.item.id && this.isLine) {
        this.active = true
      }
    },
    nodeMouseDown(e) {

    },
    nodeMouseout() {
      this.active = false
    },
    nodePointMousedown(element, postion) {
      this.$emit("pointClick", true);
      let x1 = this.item.x;
      let y1 = this.item.y;
      if (postion === "top") {
        x1 = x1 + this.item.width / 2;
      } else if (postion === "bottom") {
        x1 = x1 + this.item.width / 2;
        y1 = y1 + this.item.height;
      } else if (postion === "left") {
        y1 = y1 + this.item.height / 2;
      } else if (postion === "right") {
        x1 = x1 + this.item.width;
        y1 = y1 + this.item.height / 2;
      }
      const lineStart = {
        id: uuid(),
        type: "line",
        backgroundColor: "gray",
        x1: x1,
        y1: y1,
        x2: 0,
        y2: 0,
        fromNodeId: this.item.id,
        toNodeId: "",
        fromPosition:postion,
        toPosition:''
      };
      localStorage.setItem("line", JSON.stringify(lineStart));
    },
    nodePointMouseup(element, postion) {
      this.$emit("pointClick", false);
      // this.active = false
      let x2 = this.item.x;
      let y2 = this.item.y;
      if (postion === "top") {
        x2 = x2 + this.item.width / 2;
      } else if (postion === "bottom") {
        x2 = x2 + this.item.width / 2;
        y2 = y2 + this.item.height;
      } else if (postion === "left") {
        y2 = y2 + this.item.height / 2;
      } else if (postion === "right") {
        x2 = x2 + this.item.width;
        y2 = y2 + this.item.height / 2;
      }
      const lineStr = localStorage.getItem("line");
      const lineEnd = lineStr && JSON.parse(lineStr);
      lineEnd.x2 = x2;
      lineEnd.y2 = y2;
      lineEnd.toNodeId = this.item.id;
      lineEnd.toPosition=postion
      console.log("x2", x2, postion);
      console.log("y2", y2, postion);
      this.$emit("createLine", lineEnd);
    },
    nodeDelete(item) {
      this.$emit("nodeDelete", item);
    },
  },
};
</script>

<style scoped lang="scss">
.node-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  pointer-events: all;
  visibility: visible;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  padding: 5px;
  user-select: none;

  .node-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgb(0, 255, 21);
    border-radius: 100%;
    pointer-events: all;
    cursor: crosshair;
  }

  .top {
    top: -5px;
    left: 50%;
  }

  .bottom {
    bottom: -5px;
    left: 50%;
  }

  .left {
    top: 50%;
    left: -5px;
  }

  .right {
    top: 50%;
    right: -5px;
  }

  .icon {
    height: 48px;
    width: 48px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -24px;
    line-height: 48px;
    border-radius: 50%;
    background-color: #a7d1e6;
  }

  .title {
    width: 100px;
    position: absolute;
    right: 2px;
    font-size: 12px;
    overflow: hidden;
  }
}

.active {
  border: 3px solid green;
}

.circular {
  border-radius: 100%;
  width: 85px;
  height: 85px;
  background-color: green;
}

.rectangle {
  width: 150px;
  height: 85px;
  background-color: red;
}
</style>